#{extends 'main.html' /}
#{set title:'产品详情' /}

<body>
<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a href="javascript:history.go(-1);" class="icon icon-left pull-left"></a>
            <h1 class="title">产品详情</h1>
        </header>
        <section class="product_add content scroll_y" style="padding-bottom:2rem;" >
            <div class="list-block">
                <form id="productForm" name="form1" method="post" action="">
                    <input id="id_productId" type="hidden" name="productId" value="${product?.id}">
                    <ul>
                        <!-- Text inputs -->
                    *{  <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商品ID</div>
                                    <div class="item-input">
                                        <input type="text" readonly name="name" value="${product?.id}"
                                               placeholder="无需填写">
                                    </div>
                                </div>
                            </div>
                        </li>}*
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商品名称</div>
                                    <div class="item-input">
                                        <input id="id_name" type="text" name="name" value="${product?.name}"
                                               placeholder="请输入名称">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商品大类</div>
                                    <div class="item-input">
                                        <select id="parentTypeId" name="parentType" onchange="getTwoType()" >
                                            <option value="">--请选择--</option>
                                        #{list parentList , as : 'parentType'}
                                            <option value="${parentType?.id}" #{if product?.parentType?.id == parentType?.id}
                                                    selected="true"#{/if}>${parentType?.name} </option>
                                        #{/list}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商品小类</div>
                                    <div class="item-input">
                                        <select id="id_typeId" name="productTypeId"  >
                                            <option value="">--请选择--</option>
                                        #{list typeList , as : 'type'}
                                            <option value="${type?.id}" #{if product?.productType?.id == type?.id}
                                                    selected="true"#{/if}>${type?.name} </option>
                                        #{/list}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                                    <div class="item-input">
                                        <input id="id_spec" type="text" name="spec" value="${product?.spec}"
                                               placeholder="请输入商品规格">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</div>
                                    <div class="item-input">
                                        <input id="id_unit" type="text" name="unit" value="${product.unit}"
                                               placeholder="请输入">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</div>
                                    <div class="item-input">
                                        <input id="id_oldPrice" type="number" name="oldPrice"
                                               value="${product?.oldPrice?.format('#.##')}" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</div>
                                    <div class="item-input">
                                        <input id="id_merchantPrice" type="number" name="merchantPrice"
                                               value="${product?.merchantPrice?.format('#.##')}" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</div>
                                    <div class="item-input">
                                        <input id="id_stock" type="number" name="stock"
                                               value="${product?.stock?.format('#.##')}" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">是否上架</div>
                                    <div class="item-input">
                                        <select id="id_productStatus" name="productStatus">
                                            <option value="" #{if product?.productStatus == null || product?.productStatus == ''} selected="selected"#{/if}>--请选择--</option>
                                            <option value="UP" #{if product?.productStatus == enums.ProductStatus.UP} selected="selected"#{/if}>上架</option>
                                            <option value="DOWN" #{if product?.productStatus == enums.ProductStatus.DOWN} selected="selected"#{/if}>下架</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商品描述</div>
                                    <div class="item-input">
                                        <textarea id="id_pcContent"
                                                  name="pcContent"> ${product?.pcContent== null ? '' : product?.pcContent.raw()}</textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div>
                        <input type="file" accept="image/*" id="cameraInput" name="cameraInput" style="display:none;"/>
                        <input type="file" accept="image/*" id="cameraInput_andriod" name="cameraInput_andriod" style="display:none;"/>
                    </div>
                    <div class="content-block uploadPic">
                        <h3>商品logo(请上传图片)</h3>
                        <ul>
                        #{if product != null && product.mainImage != null && product.mainImage != ''&& product.mainImage != undefinde }
                            <li class="img img_1">
                                <a href="#" image_number="1"><i class="iconfont">&#xe6d3;</i></a>
                                <img src="${product?.mainImage}"/>
                                <input type="hidden" class="imgs imgs_1"  value="${product?.mainImage}"/>
                            </li>
                        #{/if}
                            <li id="addli_1" image_number="1" class="add create-actions"><img src="/public/sui/images/btn_add.png"></li>
                        </ul>
                    </div>

                    <div class="content-block uploadBannerPic">
                        <h3>商品详情页图片(最多5张图片)</h3>
                        <ul>
                        #{list imageList  , as:'image'}
                            <li class="img img_5">
                                <a href="#" image_number="5"><i class="iconfont">&#xe6d3;</i></a>
                                <img src="${image?.imgPath}" />
                                <input type="hidden" class="imgs imgs_5"  value="${image?.imgPath}"/>
                            </li>
                        #{/list}
                            <li id="addli_5" image_number="5" class="add create-actions"><img  src="/public/sui/images/btn_add.png"></li>
                        </ul>

                    </div>

                    <div class="content-block">
                        <input type="button" name="button" class="button button-fill button-pink" id="button"
                               onclick="savePro()" value="保存">
                    </div>

                </form>
            </div>

        </section>

    #{include 'footer.html'/}
    </div>
</div>

<script>$.init()</script>
<script type="text/javascript" src="/public/sui/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="/public/sui/js/uploadImg3.js"></script>
<script type="text/javascript" src="/public/sui/js/list.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
//        $('#addli_1').hide();
        initAddButton();
        //遍历垃圾桶图标,并绑定删除
        $(".iconfont").each(function (i) {
            $(this).bind("click", function () {
                var image_number = $(this).parent().attr('image_number');
                // console.log('点击删除进来了');
                // console.log(image_number);
                $(this).parent().parent().remove();
                if ($(".imgs_" + image_number).length >= (parseInt(image_number)+1)) {
                    $("#addli_" + image_number).hide();
                } else {
                    $("#addli_" + image_number).show();
                }
            })
        });
    })

    //初始化商品添加按钮状态
    function initAddButton() {
        if ($(".imgs_1").length >= 2) {
            $("#addli_1").hide();
        } else {
            $("#addli_1").show();
        }
        if ($(".imgs_5").length >= 6) {
            $("#addli_5").hide();
        } else {
            $("#addli_5").show();
        }

    }


    function getTwoType(id){
        var parentTypeId = $('#parentTypeId').val();
        $("#id_typeId").empty();
        $.getJSON("/product/secondLevel", {id: parentTypeId},
                function (data) {
                    console.log(data,data)
                    if(data.list.length > 0){
                        $.each(data.list,function(index,value){
                            $("#id_typeId").append("<option value='"+value.id+"'>"+value.name+"</option>");
                        })
                    }else{
                        $("#id_typeId").append("<option value=''>--请选择--</option>");
                    }

                })
    }

</script>

<div id="img_tmp_1" style="display: none;">
    <li class="img img_1">
        <a href="#" image_number="1" ><i class="iconfont">&#xe6d3;</i></a>
        <img src="" id="img_src_1"/>
        <input type="hidden" class="imgs imgs_1" id="img_src_hidden_1" value="imgSrc"/>
    </li>
</div>

<div id="img_tmp_5" style="display: none;">
    <li class="img img_5">
        <a href="#" image_number="5"><i class="iconfont">&#xe6d3;</i></a>
        <img src="" id="img_src_5"/>
        <input type="hidden" class="imgs imgs_5" id="img_src_hidden_5" value="imgSrc"/>
    </li>
</div>

</body>
